import React, { Component } from 'react'
import { Route, BrowserRouter, Routes, Navigate, Link } from 'react-router-dom'
import Header from './views/header'
import Foot from './views/footer'

import Condition from './views/condition/condition'
import List from './views/list/list'
import Pure from './views/pure'
import ActionIndex from './views/action/index'
import StateIndex from './views/state/index'
import StateInput from './views/state/input'
import StateChat from './views/state/chat'
import Share from './views/share'
import './index.css'
import NavBar from './components/navbar'
import ListDetail from './views/condition/listDetail'
import QQ from './views/qq/index'
import { socket } from './utils/socketIoClient'
import { useDispatch, useSelector } from 'react-redux'
import { UPDADEMSG, getDispatchObject } from './store/reducers'
import BottomNav from './views/bottomNav/index'
import GetModal from './views/modal/index'
import UseEffectModule from './views/useEffect/index'

const App = function () {
   const dispatch = useDispatch()
   socket.on('RECEIVE-MSG', info => {})

   socket.on('RECEIVE-MSG', info => {
      console.log('connect')
      dispatch(getDispatchObject(UPDADEMSG, info))
   })

   return (
      <div>
        
         <div className='showContent'>
            <Routes>
               <Route path='/header' element={<Header />}></Route>
               <Route path='/foot/ddd' element={<Foot />}></Route>
               <Route path='condition' element={<Condition />}>
                  <Route path='detail' element={<ListDetail />}></Route>
               </Route>
               <Route path='/list/:id/:title' element={<List />}></Route>
               <Route path='/pure' element={<Pure />}></Route>
               <Route path='/action/index' element={<ActionIndex />}></Route>
               <Route path='/state/index' element={<StateIndex />}></Route>
               <Route path='/state/input' element={<StateInput />}></Route>
               <Route path='/state/chat' element={<StateChat />}></Route>
               <Route path='/Share' element={<Share />}></Route>
               <Route path='*' element={<NotFound />}></Route>
               <Route path='/qq' element={<QQ />}></Route>
               <Route path='/modal' element={<GetModal />}></Route>
               <Route path='/useEffect' element={<UseEffectModule />}></Route>

               
               {/* <Route path='*' element={<Navigate to='/pure' />} /> */}
            </Routes>
         </div>
        <div className="navBottom"><BottomNav></BottomNav></div>
      </div>
   )
}

function NotFound() {
   return (
      <>
         <h3>暂无该页面</h3>
      </>
   )
}

export default App
